<template>
  <div class="e009_container">
    <div style="height:15px;">
      雷达图实现
    </div>
    <div
      class="echart"
      ref="echart"
    >

    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    let charts = this.$echarts.init(this.$refs['echart']);
    let data = [
      {
        name: '销售',
        max: 6500,
      },
      {
        name: '行政',
        max: 16000,
      },
      {
        name: '信息技术',
        max: 30000,
      },
      {
        name: '客户支持',
        max: 38000,
      },
      {
        name: '发展',
        max: 52000,
      },
      {
        name: '营销',
        max: 25000,
      },
    ];
    let option = {
      color: ['red'], //设置颜色
      title: {
        text: '雷达图', //标题展示
        textStyle: {
          color: '#6a9955', //标题颜色
          fontStyle: 'normal', //标题字体【italic（斜体）,normal（通用）】
        },
      },
      radar: {
        //雷达参数设置
        indicator: data, //配置各个纬度最大值
        shape: 'polygon', //雷达图绘制类型，支持 'polygon' 和 'circle'
      },
      series: [
        {
          type: 'radar', //设置类型为【雷达】
          label: {
            //显示数值
            show: true,
          },
          data: [
            {
              value: [4300, 10000, 28000, 35000, 50000, 19000],
              name: '已分配预算',
              areaStyle: {
                color: 'blue',
              },
            },
            {
              value: [6000, 14000, 28000, 31000, 42000, 21000],
              name: '实际支出',
              areaStyle: {
                color: 'red',
              },
            },
          ],
        },
      ],
    };
    charts.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
.e009_container {
  height: 100%;
  .echart {
    height: calc(100% - 15px);
    // background-color: red;
  }
}
</style>